<template>
    <view class="azm-home-index">
        <view class="azm-home-content" :style="TabBarContentStyle">
            <!--数据-->
            <TabBarReport class="flex-sub overflow-hidden" v-if="active=== 0" ref="TabBar"
                          :bottom="navBarBottom"/>
            <!--客户-->
            <TabBarCustom class="flex-sub overflow-hidden" v-else-if="active === 1" ref="TabBar"
                          :bottom="navBarBottom"/>
            <!--百宝箱-->
            <TabBarTreasureBox class="flex-sub overflow-hidden" v-else-if="active === 2" ref="TabBar"
                               :bottom="navBarBottom"/>
            <!--组织-->
            <TabBarOrganized class="flex-sub overflow-hidden" v-else-if="active === 3" ref="TabBar"
                             :bottom="navBarBottom"/>
            <!--我的-->
            <TabBarMine class="flex-sub overflow-hidden" v-else-if="active === 4" ref="TabBar"
                        :bottom="navBarBottom"/>
        </view>
        <!--底部状态栏-->
        <footerBar ref="footerBar" :showTabBar="true" @footerBarLoad="handleFooterBarLoad"
                   @footerBarClick="handleFooterBarClick" :active_index="active"></footerBar>
    </view>
</template>

<script>
    import { AzmComponent } from '@u/component.js';

    import TabBarOrganized from './tabBar/organized.vue';
    import TabBarMine from './tabBar/mine.vue';
    import TabBarTreasureBox from './tabBar/treasureBox.vue';
    import TabBarReport from './tabBar/report.vue';
    import TabBarCustom from './tabBar/custom.vue';

    const AzmComponentMixins = AzmComponent({
        onBackPress () {
            this.handleRefresh()
        }
    })
    export default {
        components: {
            TabBarCustom,
            TabBarOrganized,
            TabBarMine,
            TabBarTreasureBox,
            TabBarReport
        },
        mixins: [AzmComponentMixins],
        data () {
            return {
                active: -1,
                navBarBottom: 50,
                TabBarContentStyle: ``,
                isShow: false,
                corpusList: [],
                sort_active: 0,
                sort_id: -1
            }
        },
        onLoad () {
            let active = this.$Storage.getStorageSync('home_active_path');
            this.active = this.$util.getNumber(active, 0);
            this.loadData()
        },
        watch: {
            isShow () {
                this.sort_active = 0;
                this.sort_id = -1;
            }
        },
        methods: {
            async loadData () {
                await this.getBasicUserInfoSync();
            },
            handleRefresh () {
                this.$nextTick(function () {
                    this.loadData();
                    this.$refs.TabBar && typeof this.$refs.TabBar.handleRefresh === "function" && this.$refs.TabBar.handleRefresh()
                })
            },
            handleFooterBarClick ({item, index}) {
                if (index === 4) this.loadData()
                this.active = index;
                this.$Storage.setStorageSync('home_active_path', index, '1d');
            }
        }
    }
</script>

<style scoped lang="scss">
    .azm-home__writeAnEssay {
        position: absolute;
        width: 120*2upx;
        bottom: 15*2upx;
        left: 50%;
        transform: translateX(-50%);
    }

    .azm-home-index {
        position: relative;
        background: $tl-bg-color-default;
        height: 100vh;


        .azm-home-content {
            height: calc(100vh - 100rpx - (var(--window-bottom) + constant(safe-area-inset-bottom)));
            height: calc(100vh - 100rpx - (var(--window-bottom) + env(safe-area-inset-bottom)));
        }

        &.fullscreen {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        &.bg-active {
            background: #fff;
        }
    }
</style>
<style>
    page {
        min-height: 100vh;
    }
</style>
